<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta charset="UTF-8">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="content-language" content="en">

  <link rel="icon" href="data:;base64,iVBORw0KGgo=">

  <base href="../../dist/">

  <!-- ES6 Modules cannot be used without MIME types, so they don't work from local files! Use http-server etc. -->
  <script type="module">
    // import { LaTeXJSComponent } from "https://cdn.jsdelivr.net/npm/latex.js@0.12.4/dist/latex.mjs"
    import { LaTeXJSComponent } from "./latex.mjs"
    customElements.define("latex-js", LaTeXJSComponent)
  </script>

  <style>
    body {
      font-family: "DejaVu Sans";
      font-size: 14px;
    }

    latex-js {
      display: inline-block;
      width: 45%;
      border: 1px solid green;
      margin-left: 2%;
      margin-right: 2%;
    }
  </style>

  <title>LaTeX.js Web Component Test</title>
</head>

<body>
  <h1>Compiling LaTeX</h1>

  <p>Here are two LaTeX documents side by side:</p>

  <p>
    <latex-js>
      \documentclass[16pt]{article}

      \begin{document}
      Hello World. \texttt{homecoming} configuring components environments playground
      \end{document}
    </latex-js>


    <latex-js hyphenate="false">
      Another.
    </latex-js>
  </p>
</body>

</html>
